<template>
  <div class="tab">
    <section>
      坐标：<span class="txt">({{ x }}，{{ y }})</span>
    </section>
    <section>
      角度：<span class="txt">{{ angle }}°</span>
    </section>
    <section>
      混轮：<span class="txt">{{ onwheelLen }}</span>
    </section>
    <section>
      移动：<span class="txt">({{ mx }}，{{ my }})</span>
    </section>
    <section>
      倍数：<span class="txt">{{ showRate }}</span>
    </section>
    <section class="control">
      <el-button size="small" type="primary" :icon="Refresh" @click="reset">恢复</el-button>
      <el-button size="small" type="danger" :icon="Place" @click="mark">标记</el-button>
    </section>
    <div class="b-container">
      <el-space>
    <span>
      模式
    </span>
        <el-switch
            @change="changePattern"
            v-model="pattern"
            inline-prompt
            style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
            active-text="预览"
            inactive-text="编辑"/>
      </el-space>
    </div>
    <div class="b-container">
      <el-space>
    <span>
      退出
    </span>
        <el-button size="small" type="primary" @click="logout">退出</el-button>
      </el-space>
    </div>
  </div>
</template>

<script setup>

import {ref, watch} from 'vue'
import {Place, Refresh} from '@element-plus/icons-vue'
import {ElMessageBox} from 'element-plus'
import usePatternStore from "@/store/pattern";
import useAdminStore from "@/store/admin.js";

const usePattern = usePatternStore()
const useAdmin = useAdminStore()
const changePattern = (e) => {
  if (e) {
    usePattern.setPattern("view")
  } else {
    usePattern.setPattern("edit")
  }
}
// 模式为true是表示view，false表示edit
const pattern = ref(true)
// 定义一个props,放大倍数，默认数值为0
const props = defineProps({
  rate: {
    type: Number,
    default: 0
  },
  x: {
    type: Number,
    default: 0
  },
  y: {
    type: Number,
    default: 0
  },
  angle: {
    type: Number,
    default: 0
  },
  mx: {
    type: Number,
    default: 0
  },
  my: {
    type: Number,
    default: 0
  },
  onwheelLen: {
    type: Number,
    default: 0
  },
})
const showRate = ref(0)
// 计算属性，对props中的rate保留3为小数
watch(() => props.rate, (newVal) => {
  showRate.value = newVal.toFixed(3)
})
const emits = defineEmits(['resetSize'])
const reset = () => {
  // 调用这个方法，触发父组件中的resetSize方法
  emits('resetSize')
}
const mark = () => {
  if (usePattern.modal !== "edit") {
    ElMessageBox.alert("请先切换到编辑模式", "提示", {
      confirmButtonText: "确定",
      callback: action => {
      }
    })
  }

  let img = document.querySelector("#img")
  img.style.cursor = "crosshair"
}
const logout = () => {
  useAdmin.logout()
}
</script>

<style lang="scss" scoped>
.tab {
  border-radius: 4px;
  box-sizing: border-box;
  padding: 10px;
  color: white;
  background: rgba(0, 0, 0, 0.5);
  position: absolute;
  top: 50px;
  right: 50px;
  width: 160px;
  font-size: 12px;
  box-shadow: rgba(0, 0, 0, 0.12) 0px 0px 12px 0px;

  .txt {
    font-size: 8px;
  }
}
</style>